<template>
  <section class="OrderDetails clearfix">
		<!-- 头部导航 -->
		<Nav :URL="urls.url" :text="urls.text"></Nav>
		<!-- 订单详情 -->
		<ul class="Order_Ifon_Name dipW clearfix" v-if="this.usernameIfoncontacts != null || this.usernameIfoncontacts != undefined"> 
			<li class="Order_Ifon_li wid_pad_lf dip ju_al_lf li_Ifon_fas">
				<span>订单金额：</span>
				<span class="Order_Ifon_moy">￥{{this.usernameIfoncontacts.objmoney}}</span>
			</li>
			<li class="Order_Ifon_li wid_pad_lf dip ju_al_lf li_Ifon_fas">
				<span>收货信息：</span>
			</li>
			<li class="Order_Ifon_li li_Ifon_last">
				<div class="dip ju_al_lf li_IFONDIV">
					<span class="li_lastName">{{this.usernameIfoncontacts.contacts}}</span>
					<span class="li_lastPAdd last_li_puds">{{this.usernameIfoncontacts.contactsPhone}}</span>
				</div>
				<div class="dip ju_al_lf li_IFONDIV">
					<span class="li_lastName2">
						<img class="li_lastName_img" src="../../../static/images/Order/Order_attr.png" alt="">
					</span>
					<span class="li_lastPAdd li_laset_cor">{{this.usernameIfoncontacts.address}}</span>
				</div>
			</li>
		</ul>
		<!--订单详情 在线  -->
		<ul class="Order_Ifon_Name dipW clearfix" v-else> 
			<li class="Order_Ifon_li wid_pad_lf dip ju_al_lf li_Ifon_fas">
				<span>订单金额：</span>
				<span class="Order_Ifon_moy">￥{{this.userPurchaseorder.data.orderAmount}}</span>
			</li>
			<li class="Order_Ifon_li wid_pad_lf dip ju_al_lf li_Ifon_fas">
				<span>收货信息：</span>
			</li>
			<li class="Order_Ifon_li li_Ifon_last">
				<div class="dip ju_al_lf li_IFONDIV">
					<span class="li_lastName">{{this.userPurchaseorder.data.contacts}}</span>
					<span class="li_lastPAdd last_li_puds">{{this.userPurchaseorder.data.contactsPhone}}</span>
				</div>
				<div class="dip ju_al_lf li_IFONDIV">
					<span class="li_lastName2">
						<img class="li_lastName_img" src="../../../static/images/Order/Order_attr.png" alt="">
					</span>
					<span class="li_lastPAdd li_laset_cor">{{this.userPurchaseorder.data.deliveryAddress}}</span>
				</div>
			</li>
		</ul>
		<!-- 配送时间 -->
		<ul class="Order_Ifon_Name dipW clearfix Order_Ifon_ADDR"> 
			<li class="Order_Ifon_li wid_pad_lf dip ju_al_lf li_Ifon_fas">
				<span>配送时间：</span>
			</li>
			<li class="Order_ADDR_box ">
				<div class="Order_Ifon_li dip ju_al  Order_ADDR_li li_Ifon_fas" v-for="(addrLIst,index) in addrTime" :key="index" :class="{'addrTimeActive':addrLIst.ind}" @click="addrTimeCor(index)">{{addrLIst.text}}</div>
			</li>
		</ul>
		<!-- 支付方式 -->
		<PAY></PAY>
		<!-- 这是货到付款 -->
		<!-- <footer class="payment_mode dip" v-if="this.pay == 1">
			<button class="mall_ToPay ToPay——bg" @click="addWechet(1)">取消订单</button>     
			<button class="mall_ToPay Asyougo_bg" @click="ifpayment(1)">确认订单</button>
		</footer> -->
		<footer class="ORder_detilas_Negotiate" @click="ifpayment(1)" v-if="this.pay == 1">确认订单</footer>
		<!-- 这是微信支付-->		
		<footer class="payment_mode dip" v-if="this.pay == 2">
			<button class="mall_ToPay ToPay——bg" @click="addWechet(2)">取消订单</button>     
			<button class="mall_ToPay Asyougo_bg" @click="ifpayment(2)">确认订单</button>
		</footer>
		<!-- 余额弹出框 -->
		<div class="orderDetilserror" v-if="this.yueblock" >
			<div class="dipW ju_al orderDetilserror_child">
				<span class="ODS_fiast dipW ju_al">
					<em>您的账户余额不足</em>
					<em>是否需要充值?</em>
				</span>
				<span class="dip ju_al ODS_last bg_li">
					<em class="ODS_em1" @click="wechetRechargefgh()">取消</em>
					<em class="ODS_em2" @click="AddwechetRecharge()">立即充值</em>
				</span>
			</div>
		</div>
  </section>
</template>
<script>
import Nav from './mallTopNav'
import PAY from './orderPAY'
export default {
  data(){
    return {
			urls:{
        url:'',
        text:'订单信息',
			},
			Rurtuurl:'',//路由
			// Rurtuurlpay:'',//支付方式
			userPurchaseorder:'', //获取上一个页面的订单信息
			usernameIfoncontacts:'', // 货到付款信息
			OPenID:'', //openID
			addrTime:[
				{
					text:'不限送货时间',
					ind:true,
				}
				,{
					text:'周一至周五',
					ind:false,
				}
				,{
					text:'周六至周日',
					ind:false,
				}
			],
			positext:'', //这是提示
      showposi:false, 
			ifTopay:true,
			addrbalance:'', //配送方式
			addrTimeacitve:'', //配送时间
			yueblock:false,//这是判断余额
		}
	}
	,components:{Nav,PAY}
	,methods:{
		addrTimeCor(index){
			for(var i =0;i<this.addrTime.length;i++){
				this.addrTime[i].ind = false
			}
			this.addrTime[index].ind = true
			this.addrTimeacitve = this.addrTime[index].text;
		},
		wechetRechargefgh(){
			this.yueblock = false;
		},
		AddwechetRecharge(){
			var _this = this
			var t;
			// clearTimeout(t)	
			this.$router.push({
				path:'/bomNav/userRecharge/1'//要去的路由充值
			})
			// alert('刚充值成功')
			// t = setTimeout(function(){
				_this.yueblock = false;	
			// },1000)
		},
		addWechet(type){
			this.$store.dispatch('showloader') 
			var _this = this
			this.axios.post(this.$busPoat.cancelS(),{
				"orderId":this.userPurchaseorder.data.orderId
			}).then(res =>{
				// console.log(res)
				var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res != null || res != undefined){
						 this.$store.dispatch('hideloader')						
						if(res.data.iplancode == 101){
							alert('亲,您的'+res.data.msg+'!!!')
						_this.$router.push({path:''+this.urls.url+''})
						}else if(res.data.iplancode == 102){
							alert('亲，你的订单已全部支付，'+res.data.msg+'哦！')
						}else if(res.data.iplancode == 103){
							alert('亲，您的订单中'+res.data.msg+'!')
						}
          }else{
            this.$store.dispatch('hideloader')						
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },2000)
			}).catch(error=>{
        this.$store.dispatch('hideloader')				
				alert('订单取消失败')
			})
		},
		onBridgeReady(resf){
			var _this = this
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":resf.data.unifiedOrd.appId,     //公众号名称，由商户传入     
					"timeStamp":resf.data.unifiedOrd.timeStamp,     ////       //时间戳，自1970年以来的秒数    
					"nonceStr":resf.data.unifiedOrd.nonceStr, //随机串     
					"package":resf.data.unifiedOrd.package,     
					"signType":"MD5",      ///    //微信签名方式：     
					"paySign":resf.data.unifiedOrd.sign //微信签名 
				},
				// console.log(gf)
				function(res){     
					if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            _this.$router.push({
              path:'/bomNav/OrderDetails/orderseccess'
            })
					} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				}
			); 
		},
		ifpayment(number){
		  var fmoneybalanc = sessionStorage.getItem('moneybalanc')//获取支付方式
      if(number == 2){     
				let OrderIfon = {
          "deliveryMethod":'物流配送',
          "deliveryTime":this.addrTimeacitve,
          "paymentMode":fmoneybalanc,
          "orderId":this.userPurchaseorder.data.orderId,
          "orderAmount":this.userPurchaseorder.data.orderAmount,
          "orderCode":this.userPurchaseorder.data.orderCode,
          "openid":this.OPenID,
          "description":this.userPurchaseorder.data.description,
          "commodityId":this.userPurchaseorder.data.commodityId,
        }
				// console.log(OrderIfon)
				if(fmoneybalanc == 'balancePayment'){
					// console.log(this.userPurchaseorder.data.accountBalance < this.userPurchaseorder.data.orderAmount)
					// if(this.userPurchaseorder.data.accountBalance > this.userPurchaseorder.data.orderAmount){  //这是大于
					if(this.userPurchaseorder.data.accountBalance < this.userPurchaseorder.data.orderAmount){  //这是小于
						this.yueblock = true;
					}else{
						this.$store.dispatch('showloader')			
						this.yueblock = false;
						this.axios.post(this.$busPoat.payment(),OrderIfon
						).then(resf =>{
							//logoding
							// console.log(resf.data)
							  var st;
								clearTimeout(st)
								st = setTimeout(() =>{
									if(resf != null || resf != undefined){
								 		this.$store.dispatch('hideloader')										
										if(resf.data.iplancode == 200){
											//跳到成功页
											this.$router.push({
												path:'/bomNav/OrderDetails/orderseccess'
											})
											//logoding 结束
										}else if(resf.data.iplancode == 106){
											alert(resf.data.msg)
											//提示用户
										}else if(resf.data.iplancode == 101){
											alert(resf.data.msg)
											//跳到未支付页
											//logoding 结束
										}else if(resf.data.iplancode == 104){
											alert(resf.data.msg)
											this.$router.push({
												path:'/bomNav/OrderDetails/orderseccess'
											})
											//提示用户
										}else if(resf.data.iplancode == 105){
											alert(resf.data.msg)
											//提示用户
										}
								}else{
									this.$store.dispatch('hideloader')									
									alert('请求加载过慢...')
								}
								clearTimeout(st)                                                                       
							},1000)
						}).catch(error=>{
							this.$store.dispatch('hideloader')
							alert('支付失败')
						})
					}
				}else if(fmoneybalanc == 'WeChatPayment'){ //这是微信支付
					this.axios.post(this.$busPoat.payment(),OrderIfon).then(resf =>{
							if(resf.data.iplancode == 200){
								if(typeof WeixinJSBridge == "undefined"){
									if(document.addEventListener){
										document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
									}else if (document.attachEvent){
										document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
										document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
									}
								}else{
									this.onBridgeReady(resf);
								}
							}else if(resf.data.iplancode == 106){
								alert(resf.data.msg)
								//提示用户
							}else if(resf.data.iplancode == 101){
								alert(resf.data.msg)
								//跳到未支付页
								//logoding 结束
							}else if(resf.data.iplancode == 104){
								alert(resf.data.msg)
								//提示用户
							}else if(resf.data.iplancode == 102){
								alert(resf.data.msg)
								//提示用户
							}
					}).catch(error=>{
						alert('支付失败')
					})
				}
      }else if(number == 1){
				this.$store.dispatch('showloader')
				let usernameIfonc = {
          "contacts":this.usernameIfoncontacts.contacts,
					"contactsPhone":this.usernameIfoncontacts.contactsPhone,
					"address":this.usernameIfoncontacts.address,
					"commodityId":this.usernameIfoncontacts.commodityId,
					"paymentMode":"2",
					"deliveryMethod":'物流配送',
  				"deliveryTime":this.addrTimeacitve
				}
				// console.log(usernameIfonc)
				this.axios.post(this.$busPoat.create(),usernameIfonc).then(resf =>{
					//logoding
					// console.log(resf) //调用货到支付接口
					 var st;
						clearTimeout(st)
						st = setTimeout(() =>{
							if(resf != null || resf != undefined){		
								this.$store.dispatch('hideloader')						
								if(resf.data.iplancode == 200){
									//跳到成功页
									// console.log(resf.data)
									this.axios.post(this.$busPoat.paid(),{
										"orderId":resf.data.orderId
									}).then(res =>{
						  			this.$store.dispatch('hideloader')
										// console.log(res.data)
										// sessionStorage.setItem('orderAdmCOMM',JSON.stringify(res.data))    
										// sessionStorage.removeItem('usernameIfoncontacts')							 
										this.$router.push({
											path:'/bomNav/OrderDetails/orderseccess'
										})
									}).catch(error=>{
										alert('商品下单失败')    
									})
									//logoding 结束
								}else if(resf.data.iplancode == 108){
									alert(resf.data.msg)
									//提示用户
								}
						}else{
							alert('请求加载过慢...')
							this.$store.dispatch('hideloader')
						}
						clearTimeout(st)                                                                       
					},2000)
				}).catch(error=>{
					this.$store.dispatch('hideloader')
					alert('支付失败')
				})
      }
    }
    },
	// watch:{

	// },
	created(){
		this.Rurtuurl = this.$route.params.id  //这是返回上一级
		this.urls.url = '/bomNav/'+this.Rurtuurl+'/Order'  //返回上一级
		this.userPurchaseorder = JSON.parse(sessionStorage.getItem('orderDetails')) //获取订单信息
		this.usernameIfoncontacts = JSON.parse(sessionStorage.getItem('usernameIfoncontacts')) //货到付款数据
    this.OPenID = sessionStorage.getItem('openId') //获取ID
		this.pay = this.$route.params.pay //获取支付方式
		console.log(this.pay)
		if(this.pay == 1){
			this.addrbalance = '货到付款'
		}else if(this.pay == 2){
			this.addrbalance = '在线支付'
		}
		for(var i = 0;i<this.addrTime.length;i++){
     if(this.addrTime[i].ind == true){
			this.addrTimeacitve = this.addrTime[i].text;
     }
		}
		// sessionStorage.setItem('id',this.Rurtuurl) //这是以防未支付订单
		// sessionStorage.setItem('pay',this.pay)
	},
	destroyed() { //离开清楚
    // sessionStorage.removeItem('details'+this.iDNumber+'')
  },
}
</script>
<style lang="scss" scoped>
.OrderDetails{
	margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: relative;
}
.Order_Ifon_Name{
	width: 100%;
	background: #fff;
	margin-bottom:.1rem;
	margin-top: .8rem;
	.Order_Ifon_li{
		width: 100%;
		border-bottom:.02rem solid #f2f2f2;
		font-size:.24rem;
		color:#333;
		font-weight: 600;
		font-family: MicrosoftYaHei,'微软雅黑';
	}
	.li_Ifon_fas{
		height: 0.84rem;
		.Order_Ifon_moy{
			padding-left:.1rem;
			font-size: .3rem;
			color:#FF7200;
			font-family: Arial;
		}
	}
	.last_li_puds{
		font-weight: 500 !important;
		font-family: Arial;
		letter-spacing: .02rem;
	}
	.li_Ifon_last{
		padding-left:.8rem;
		height: 1.66rem;
		.li_IFONDIV{
			height: 50%;
			.li_lastName2{
				width: 15%;
				height: 100%;
				padding:0.18rem .2rem;
				text-align: center;
				.li_lastName_img{
					height: 100%;
					width:70%;
				}
			}
			.li_lastPAdd{
				padding-left: 4%;
			}
			.li_laset_cor{
				font-weight: 500;
				color:#999999;
				width: 85%;
			}
		}
		
	}
}
.Order_Ifon_ADDR{
	margin-top:0;
	margin-bottom:.22rem;
	.Order_ADDR_box{
		padding:0rem .4rem;
		width: 100%;
		.Order_ADDR_li{
			font-size:.28rem;
			color:#999999;
			font-weight: 500;
		}
		.addrTimeActive{
			color:#FF7200;
		}
	}
}
.payment_mode{
  width: 100%;
  height: 0.98rem;
  background: #fff;
  justify-content:space-around;
  align-items: center;
  position: fixed;
  bottom:0;
  z-index: 51;
  .mall_ToPay{
    width: 50%;
    // position: relative;
    font-size:.3rem;
    height: 100%;
    line-height: 0.98rem;
    text-align: center;
    color:#fff; 
  }
  .ToPay——bg{
    background: #ABABAB ;
  }
  .ToPay——bg::before,.Asyougo_bg::after{
    content:"";
    width:0;
    height:0;
    position:absolute;
  }
  // .ToPay——bg::before{
  //   left:35.5%;
  //   top:0%;
  //   border:solid .98rem transparent;
  //   border-right:solid .26rem #FF7200;       /* 黑色大三角形 */
  //   border-top:solid .98rem transparent;
  // }
  .Asyougo_bg::after{
    left:50%;
    top:0%;
    border-top:solid 0rem transparent;
    border-left:solid .26rem #ABABAB;       /* 黑色大三角形 */
    border-bottom:solid .98rem transparent
  }
  .Asyougo_bg{
    background: #FF7200;
  }
}
.orderDetilserror{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  .orderDetilserror_child{
		border:0;
    width: 70%;
    // height: 22%;
    background: rgba(255,255,255,1);
    position: relative;
    top:50%;
    left:50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
    span{
			width: 100%;
      font-size: .28rem;
      color:#666666;
			text-align: center;
			font-family: 'MicrosoftYaHei';
    }
    .ODS_fiast{
      height: 1.8rem;
      padding:9% 25%;
			// line-height: .4rem;
			font-weight: 600;
    }
    .ODS_last{
      // background-image: url('../../../static/images/Order/order_yue_img.png');
      // background-repeat: no-repeat;
      // background-size: 100%;
			// height: .8rem;
      border:0;
      padding:5% 0rem;
      em{
        width: 50%;
        height: 100%;
				font-weight: 600;
				color:#FFFFFF;
				// background: #ff6f00;
        // line-height: .8rem;
      }
      .ODS_em2{
				border-left:.02rem solid #FF7200;
      }
    }
  }
}
.ORder_detilas_Negotiate{
  width: 100%;
  position: fixed;
  left:0rem;
  bottom:0rem;
  height: 1rem;
  background: #FF7200;
  text-align: center;
  line-height: 1rem;
  color:#fff;
  font-size: .3rem;
}
</style>
